<template>
  <a-drawer
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <template  slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 80px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>

      <a-spin :spinning="confirmLoading" class="drawer-content">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
                <a-form-item label="用户账号">
                  <a-input autocomplete="off" placeholder="" v-model="queryParam.username.value"></a-input>
                </a-form-item>
                <a-form-item label="机构">
                  <ak-tree-select-multiple :url="sysDepartUrl.tree" v-model="queryParam.depart.value"/>
                </a-form-item>
                <a-form-item label="姓名">
                  <a-input autocomplete="off" placeholder="请输入姓名查询" v-model="queryParam.realname.value"></a-input>
                </a-form-item>
                <a-form-item label="邮箱">
                  <a-input autocomplete="off" placeholder="请输入邮箱查询" v-model="queryParam.email.value"></a-input>
                </a-form-item>

                <a-form-item label="手机号码">
                  <a-input autocomplete="off" placeholder="请输入手机号码查询" v-model="queryParam.phone.value"></a-input>
                </a-form-item>
            <a-form-item>
              <span  class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search" >查询</a-button>
                  <a-button @click="handleAddUserRole" type="primary" icon="plus" >添加已有用户</a-button>
                  <a-button v-if="selectedRowKeys.length>0" @click="batchDel" type="danger" icon="delete" >批量删除</a-button>
              </span>
            </a-form-item>

          </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
            selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table
            style="height:500px"
            ref="table2"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
             <span slot="ellipsis" slot-scope="text">
              <ak-ellipsis :value="text" :length="25"/>
            </span>
           <span slot="action" class="table-operator" slot-scope="text, record">
             <a @click="handleDelete(record.id)">删除</a>
            </span>
          </a-table>
        </div>
      </a-spin>
       <div class="drawer-bootom-button">
         <a-button :style="{marginRight: '8px'}" @click="handleCancel">
          关闭
        </a-button>
       </div>
    <select-user-modal ref="selectUserModal" @selectFinished="selectOK"></select-user-modal>
  </a-drawer>
</template>
<script>
  import AkfhListMixin from '../../../mixin/AkfhListMixin'
  import AkfhModelDrawMixin from '../../../mixin/AkfhModelDrawMixin'
  import SelectUserModal from './SelectUserModal';
  import {postAction} from '../../../api/manage'
  import {sysUserUrl, sysDepartUrl, sysRoleUrl} from '../../../api/url';
  import AkTreeSelectMultiple from "../../../components/akfh/AkTreeSelectMultiple";
  import AkEllipsis from "../../../components/akfh/AkEllipsis";

  export default {
    name: 'RoleUserList',
    describe:'这是角色维护页,主要是添加角色的用户，',
    mixins: [AkfhListMixin, AkfhModelDrawMixin],
    components: {
      AkEllipsis,
      AkTreeSelectMultiple,
      SelectUserModal,
    },
    data() {
      return {
        title:'角色用户',
        roleId:'',
        queryParam:{
          username:{
            column:'username',
            type:'like',
            value:''
          },
          roleListId:{
            column:'roleList.id',
            type:'eq',
            value:''
          },
          depart:{
            column:'sysDepart.id',
            type:'in',
            value:''
          },
          realname:{
            column:'realname',
            type:'like',
            value:''
          },
          email:{
            column:'email',
            type:'like',
            value:''
          },
          phone:{
            column:'phone',
            type:'like',
            value:''
          }
        },
        columns: [
          {
            title: '机构',
            align: 'center',
            dataIndex: 'sysDepartName',
            scopedSlots: { customRender: "ellipsis" }
          },
          {
            title: '账号',
            align: 'center',
            dataIndex: 'username',
            scopedSlots: { customRender: "ellipsis" }
          },
          {
            title: '姓名',
            align: 'center',
            dataIndex: 'realname',
            scopedSlots: { customRender: "ellipsis" }
          },
          {
            title: '手机号码',
            align: 'center',
            dataIndex: 'phone',
            scopedSlots: { customRender: "ellipsis" }
          },
          {
            title: '邮箱',
            align: 'center',
            dataIndex: 'email',
            scopedSlots: { customRender: "ellipsis" }
          },
          {
            title: '状态',
            align: 'center',
            dataIndex: 'status_dictText'
          },

          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 120
          }],
        sysDepartUrl:sysDepartUrl,
        url:{
          list:sysUserUrl.list,
          deleteSrc: sysRoleUrl.deleteUser,
          deleteBatchSrc:sysRoleUrl.deleteUserBatch,
          addUserRole:sysRoleUrl.grantUser
        }
      }
    },
    methods: {

      beforeLoadData(){
        return this.queryParam.roleListId.value;
      },

      show(roleId){
        this.visible=true;
        this.queryParam['roleListId'].value=roleId;
        this.url.delete = this.url.deleteSrc+"?roleId="+roleId;
        this.url.deleteBatch = this.url.deleteBatchSrc+"?roleId="+roleId;
        this.roleId = roleId;
        this.loadData();
        // 默认全屏
        this.modaltoggleFlag = true;
        this.toggleScreen();
      },
      handleAddUserRole() {
          this.$refs.selectUserModal.visible = true

      },
      selectOK(data) {
        let params = {}
        params.roleId = this.roleId;
        params.userIdList = [...data];
        postAction(this.url.addUserRole, params).then((res) => {
          if (res.success) {
            this.loadData()
            this.$message.success(res.message);
          }
        })
      },
    }
  }
</script>
<style scoped>
.drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 20px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
